<template>
    <div class="music-list">
        <div class="music-top">
            <div class="title"><h2>发现好歌单</h2></div>
            <div class="more">查看更多</div>
        </div>
        <div class="music-content">
            <van-swipe
                :loop="false"
                :width="130"
                :height="190"
                :show-indicators="false"
                class="van-swipe"
            >
                <van-swipe-item
                    v-for="item in model.result"
                    :key="item.id"
                    class="swipe-item"
                >
                    <router-link :to="{ path: `/itemMusic/${item.id}` }">
                        <img :src="item.picUrl" alt="" />
                        <p class="item-text">{{ item.name }}</p>
                        <div class="play-count">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-play25_play"></use>
                            </svg>
                            {{ filters(item.playCount) }}
                        </div>
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script>
import service from "../../request/index";
export default {
    name: "MusicList",
    data() {
        return {
            model: {},
        };
    },
    methods: {
        //获取 歌单列表
        async fetch() {
            const res = await service.get("personalized?limit=10");
            // console.log(res);
            this.model = res.data;
        },
        filters(value) {
            if (value > 100000000) {
                return (value / 100000000).toFixed(1) + "亿";
            }
            if (value > 10000) {
                return (value / 10000).toFixed(1) + "万";
            }
        },
    },
    mounted() {
        this.fetch();
        // console.log(this);
    },
};
</script>

<style lang="less" scoped>
.music-list {
    margin-top: 0.2rem;
    padding: 0.2rem;
    .music-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            padding: 0 0.2rem;
        }
        .more {
            border: 1px solid #ccc;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            border-radius: 0.4rem;
        }
    }
    .music-content {
        margin-top: 0.2rem;
        .van-swipe {
            display: flex;
            .swipe-item {
                position: relative;
                padding-right: 0.2rem;
                img {
                    height: auto;
                    width: 100%;
                    border-radius: 0.3rem;
                }
                .item-text {
                    color: #000;
                }
                .play-count {
                    top: 0;
                    right: 0.3rem;
                    position: absolute;
                    color: white;
                    margin-top: 0.1rem;
                    .icon {
                        height: 0.3rem;
                        width: 0.3rem;
                    }
                }
            }
        }
    }
}
</style>
